<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width:400px;
            align:center;
            border-left:30px;
            border-right:79px;
            background-color: aquamarine;
            margin-left:60px;
            margin-right:40px;
        }
        table{
        width: 100%;
        border-collapse: collapse;
        }

        table caption{
            font-size: 2em;
            font-weight: bold;
            margin: 1em 0;
        }

        th,td{
            border: 1px solid #999;
            text-align: center;
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <div class="main">
        <h1>列表按钮</h1>
        <hr>
        <span>正式按钮</span>
        <button id="new">新建</button>
        <button id="delete">删除</button>
        <button id="editor">编辑</button>
        <table id='table'>
            <tr>
                <td>项目一</td>
                <td>项目二</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>demo1</td>
                <td>demo2</td>
                <td>
                    <button onclick="c(this)">编辑</button>
                    <button onclick="b(this)">删除</button>
                </td>
            </tr>
        </table>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var new_f = document.getElementById('new');
            var del_f = document.getElementById('delete');
            var editor_f = document.getElementById('editor');

            new_f.onclick = function() {
                a();
            };
            del_f.onclick = function() {
                b(this);
            };
            editor_f.onclick = function() {
                c(this);
            };
        });

        function a() {
            var table = document.getElementById('table');
            var newRow = table.insertRow(-1); // -1 表示在最后插入新行
            var cell1 = newRow.insertCell(0);
            var cell2 = newRow.insertCell(1);
            var cell3 = newRow.insertCell(2);
            cell1.innerHTML = 'None';
            cell2.innerHTML = 'None';
            cell3.innerHTML = '<button onclick="c(this)">编辑</button><button onclick="b(this)">删除</button>';
        }

        function b(button) {
            var row = button.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }

        function c(button) {
            var row = button.parentNode.parentNode;
            var name = row.cells[0];
            var name2 = row.cells[1]; // 使用 cells 而不是 cell
            var inputname = window.prompt("第一个参数");
            var inputname2 = window.prompt("第二个参数");
            name.innerText = inputname;
            name2.innerText = inputname2;
        }
    </script>
</body>
</html>
